<template>
  <div class="right_statis">
    <div
      class="right_statis-child"
      v-for="item in financialList"
      :key="item.id"
    >
      <div class="right_statis-child-left">
        <div
          class="right_statis-child-left-box"
          :style="{ background: item.color }"
        >
          <img :src="item.icon" alt="" />
        </div>
      </div>
      <div class="right_statis-child-right">
        <div class="right_statis-child-right-num">
          <span style="font-size: 26px">{{ item.num }}</span>
          <span style="font-size: 16px">{{ item.unit }}</span>
        </div>
        <div class="right_statis-child-right-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup name="FinancialStatistics">
import { ref, onMounted, nextTick, shallowRef } from "vue";
import jin from "../../../assets/home/jin.png";
import ben from "../../../assets/home/ben.png";
import tui from "../../../assets/home/tui.png";
import shang from "../../../assets/home/shang.png";

const financialList = ref([
  {
    id: 1,
    name: "今日采购数量",
    num: 12,
    unit: "条",
    color: "#D0E9FF",
    icon: jin,
  },
  {
    id: 2,
    name: "本月采购数量",
    num: 157,
    unit: "条",
    color: "#FFF8E5",
    icon: ben,
  },
  {
    id: 3,
    name: "今日退款订单量",
    num: 36,
    unit: "条",
    color: "#E5FFF9",
    icon: tui,
  },
  {
    id: 4,
    name: "上月销售订单量",
    num: 1265,
    unit: "条",
    color: "#EFE9FE",
    icon: shang,
  },
]);
</script>

<style scoped lang="scss">
.right_statis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  &-child {
    width: 200px;
    margin-top: 20px;
    display: flex;
    align-items: center;

    &-left {
      margin-right: 10px;

      &-box {
        width: 63px;
        height: 63px;

        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    &-right {
      &-num {
        font-weight: bold;
        color: #404348;
      }
      &-name {
        font-weight: bold;
        font-size: 16px;
        color: #404348;
      }
    }
  }
}
</style>
